﻿@page "/scheduler/recurrence-rules"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent;

<SampleDescription>
 <p> This demo showcases how to fill the recurrence editor fields with appropriate values based on the user-provided recurrence rule string.  </p>   
</SampleDescription>
<ActionDescription>
    In this demo, the <code>SetRecurrenceRule</code> method is used to populate the fields of recurrence editor based on the static rule options selected from the dropdown list.
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper recurrence-editor-wrap">
        <div class="ddlarea">
            <span class="spanarea">Select Rule</span>
            <div class="ddlcontent">
                <SfDropDownList DataSource="@DropdownData" TValue="string" TItem="DropDownFields" @bind-Value="@RecurrenceValue" PopupHeight="200" PopupWidth="auto">
                    <DropDownListEvents ValueChange="OnRuleChange" TItem="DropDownFields" TValue="string"></DropDownListEvents>
                    <DropDownListFieldSettings Value="Value" Text="Value"></DropDownListFieldSettings>
                </SfDropDownList>
            </div>
        </div>
        <div>
            <SfRecurrenceEditor @ref="RecurrenceEditor" Value="@RecurrenceValue"></SfRecurrenceEditor>
        </div>
    </div>
</div>
@code {
    SfRecurrenceEditor RecurrenceEditor;
    string RecurrenceValue = "FREQ=DAILY;INTERVAL=2;COUNT=8";

    List<DropDownFields> DropdownData = new List<DropDownFields>() {
        new DropDownFields() { Value = "FREQ=DAILY;INTERVAL=1" },
        new DropDownFields() { Value = "FREQ=DAILY;INTERVAL=2;UNTIL=20410606T000000Z" },
        new DropDownFields() { Value = "FREQ=DAILY;INTERVAL=2;COUNT=8" },
        new DropDownFields() { Value = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;UNTIL=20410729T000000Z" },
        new DropDownFields() { Value = "FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2;INTERVAL=1;UNTIL=20410729T000000Z" },
        new DropDownFields() { Value = "FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2;INTERVAL=1" },
        new DropDownFields() { Value = "FREQ=YEARLY;BYDAY=MO;BYSETPOS=-1;INTERVAL=1;COUNT=5" }
    };
    public void OnRuleChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownFields> args)
    {
        RecurrenceEditor.SetRecurrenceRule(args.Value, DateTime.Today);
    }
    public class DropDownFields
    {
        public string Value { get; set; }
    }
}

<style>
    .recurrence-editor-wrap {
        margin: 0 25%;
    }
    .ddlarea {
        padding-bottom: 15px;
    }
    .spanarea {
        font-size: 14px;
    }
    .ddlcontent {
        padding-top: 4px;
    }
</style>